<template>
  <div class="body">
    <!-- 第一行 -->
    <div style="display: flex" class="rowcss">
      <div class="colorCss">会员手机</div>
      <div class="nocolorCss">
        <el-input
          maxlength="11"
          onkeyup="value=value.replace(/[^\d]/g,'')"
          size="mini"
          v-model.trim="customerPhone"
          placeholder="请输入手机号"
        ></el-input>
      </div>

      <div class="colorCss">会员卡号</div>
      <div class="nocolorCss">
        <el-input
          onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
          size="mini"
          v-model.trim="cardNum"
          placeholder="请输入卡号"
        ></el-input>
      </div>
      <div class="colorCss">会员姓名</div>
      <div class="nocolorCss">
        <el-input
          size="mini"
          v-model.trim="customerName"
          placeholder="请输入姓名"
        ></el-input>
      </div>
      <div class="colorCss">卡类型</div>
      <div class="nocolorCss">
        <el-select size="mini" v-model="cardType" placeholder="请选择">
          <el-option
            v-for="item in cardTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            clearable
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-button size="mini" type="primary" @click="getcustomerId"
          >查询</el-button
        >
      </div>
    </div>
    <!-- 第二行 -->
    <div style="display: flex" class="rowcss">
      <div class="colorCss">工单类型</div>
      <div class="nocolorCss">
        <el-select clearable size="mini" v-model="caseType" placeholder="请选择">
          <el-option
            v-for="item in gongdanTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="colorCss">工单小类</div>
      <div class="nocolorCss">
        <el-select clearable size="mini" v-model="caseSubType" placeholder="请选择">
          <el-option
            v-for="item in workOrderTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="colorCss">工单标题</div>
      <div class="nocolorCss" style="width: 320px">
        <el-input
          size="mini"
          v-model.trim="caseSubject"
          placeholder="请输入工单标题"
        ></el-input>
      </div>
      <div class="colorCss">已理赔次数</div>
      <div class="nocolorCss">
        <el-input
          type="number"
          min="0"
          size="mini"
          v-model.trim="claimsSettled"
          placeholder="请输入理赔次数"
        ></el-input>
      </div>
    </div>
    <!-- 第三行 -->
    <div class="rowcss" style="display: flex">
      <div class="rowheight">工单内容</div>

      <el-form
        style="width: 950px; margin: 20px 20px 0 20px"
        :inline="true"
        class="demo-form-inline"
        :model="workOrderContentVo"
        :rules="rules"
      >
        <el-form-item label="延误时长">
          <el-input
            size="mini"
            placeholder="延误时长"
            v-model.trim="workOrderContentVo.delayTime"
          ></el-input>
        </el-form-item>
        <el-form-item label="延误日期" prop="delayDate">
          <el-date-picker
            :value-format="format"
            v-model.trim="workOrderContentVo.delayDate"
            type="date"
            size="mini"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="原定航班日期" prop="originalSetOffTime">
          <el-date-picker
            type="date"
            :value-format="format"
            v-model.trim="workOrderContentVo.originalSetOffTime"
            size="mini"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="航班号" prop="flightNumber">
          <el-input
            onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
            size="mini"
            v-model.trim="workOrderContentVo.flightNumber"
            placeholder="输入航班号"
          ></el-input>
        </el-form-item>
        <el-form-item label="出发机场">
          <el-input
            size="mini"
            v-model.trim="workOrderContentVo.departureAirport"
            placeholder="出发机场"
          ></el-input>
        </el-form-item>
        <el-form-item label="到达机场">
          <el-input
            size="mini"
            v-model.trim="workOrderContentVo.arriveAirport"
            placeholder="到达机场"
          ></el-input>
        </el-form-item>
        <el-form-item label="行程">
          <el-col :span="11">
            <el-input
              size="mini"
              v-model.trim="workOrderContentVo.journeySetOff"
              placeholder="出发"
            ></el-input>
          </el-col>
          <el-col class="line" :span="2">————</el-col>
          <el-col :span="11">
            <el-input
              size="mini"
              v-model.trim="workOrderContentVo.journeyArrive"
              placeholder="到达"
            ></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="航班状态">
          <el-select
            size="mini"
            v-model.trim="workOrderContentVo.flightStatus"
            style="200px"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in flightStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="原定起飞时间">
          <el-date-picker
            v-model.trim="workOrderContentVo.originalDepartureTime"
            :value-format="format"
            size="mini"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实际起飞时间">
          <el-date-picker
            v-model.trim="workOrderContentVo.actualDepartureTime"
            :value-format="format"
            size="mini"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="原定降落时间">
          <el-date-picker
            v-model.trim="workOrderContentVo.originalLandingTime"
            :value-format="format"
            size="mini"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="实际降落时间">
          <el-date-picker
            v-model.trim="workOrderContentVo.actualLandingTime"
            :value-format="format"
            size="mini"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="延误情况补充">
          <el-input
            type="textarea"
            autosize
            v-model.trim="workOrderContentVo.replenish"
            size="mini"
            placeholder="延误情况补充"
          ></el-input>
        </el-form-item>
        <el-form-item label="航班延误图片上传">
          <el-upload
            action="http://172.16.18.106:7777/file/fileMapping/uploadAvatarVIPHall"
            :http-request="uploadFile"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :headers="headers"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第四行 -->
    <div style="display: flex" class="rowcss">
      <div class="colorCss">接受部门</div>
      <div class="nocolorCss">
        <el-select
          size="mini"
          v-model="receivingDepartment"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in departmentList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="colorCss">接受岗位</div>
      <div class="nocolorCss">
        <el-select clearable size="mini" v-model="receivePost" placeholder="请选择">
          <el-option
            v-for="item in PositionDownList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="colorCss">接收人员</div>
      <div class="nocolorCss" style="width: 320px">
        <el-select size="mini" v-model="receiver" placeholder="请选择">
          <el-option
            v-for="item in postslists"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 第五行 -->
    <div style="display: flex" class="rowcss">
      <div class="colorCss">紧急程度</div>
      <div class="nocolorCss">
        <el-select clearable size="mini" v-model="pri" placeholder="请选择">
          <el-option
            v-for="item in prilist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="colorCss">订单类型</div>
      <div class="nocolorCss">
        <el-select clearable size="mini" v-model="orderType" placeholder="请选择">
          <el-option
            v-for="item in businessList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="colorCss">相关订单号</div>
      <div class="nocolorCss" style="width: 320px">
        <el-input
          size="mini"
          v-model.trim="orderId"
          placeholder="订单号(必填)"
        ></el-input>
      </div>

      <div class="nocolorCss">
        <el-button size="mini">查询订单</el-button>
      </div>
    </div>
    <!-- 第六行 -->
    <div style="display: flex" class="rowcss">
      <div class="colorCss">指定完成时间</div>
      <div class="nocolorCss" style="width: 220px">
        <el-date-picker
          :value-format="format"
          size="mini"
          v-model.trim="specifiedTime"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </div>
      <div class="colorCss">期望完成时间</div>
      <div class="nocolorCss" style="width: 220px">
        <el-date-picker
          :value-format="format"
          size="mini"
          v-model="finish"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </div>
      <div class="colorCss">期望回复时间</div>
      <div class="nocolorCss" style="width: 320px; display: flex">
        <el-input
          style="width: 100px"
          v-model="reply"
          size="mini"
          placeholder="期望回复时间"
        ></el-input
        >分钟
      </div>
    </div>
    <!-- 第七行 -->
    <div style="display: flex; width: 100%" class="rowcss">
      <div style="width: 49%"></div>
      <el-button type="primary" size="mini" @click="getbackGuaranteeCase"
        >保存</el-button
      >
    </div>
  </div>
</template>


<script>
export default {
  name: "caseMalfeasance",
  data() {
    return {

      format: "yyyy-MM-dd",

       dialogImageUrl: '',
        dialogVisible: false,
       // 分页
      pageSize: 10,
      currentPage: 1,
      pageTotal: 0,
      // // 查询
      Thequery: {
        caseId: "",
        caseStatus: "",
        afterTime: "",
        agoTime: "",
        orderId: "",
        orderType: "",
        customerId: "",
        phone: "",
      },
      // 时间
      CX: {
        date1: new Date(new Date() - (3600 * 1000 * 24 * 7 + 1000))
          .toLocaleDateString()
          .replace(/\//g, "-"), //   日期时间
        date2: new Date(new Date().getTime() +86400000).toLocaleDateString().replace(/\//g, "-"),
      },
      // 工单列表
      Therepairorder: [],
      // 工单类型
      mold: [
        {
          value: "hotel",
          label: "酒店",
        },
        {
          value: "flight ",
          label: "机票",
        },
        {
          value: "service ",
          label: "贵宾厅",
        },
        {
          value: "train ",
          label: "火车票",
        },
        {
          value: "customer ",
          label: "会员",
        },
      ],
      // 状态待处理 = 0,处理完 = 1,
      condition: [
        {
          value: 0,
          label: "待处理",
        },
        {
          value: 1,
          label: "处理完",
        },
        {
          value: 2,
          label: "废弃",
        },
      ],

      // 弹窗显示
      centerDialogVisible: false,

      dialogImageUrl: "", //上传图片后的图片地址
      uploadImgBase64: "", //存储将图片转化为base64后的字符
      dialogVisible: false,

      // 表单验证规则
      rules: {
        delayDate: [
          { required: true, message: "请输入延误日期", trigger: "change" },
        ],
        flightNumber: [
          { required: true, message: "请输入航班号", trigger: "change" },
        ],
        originalSetOffTime: [
          { required: true, message: "请输入原定航班日期", trigger: "change" },
        ],
      },
     
      // 部门id
      deplt: "",
      // 时间格式
      format: "yyyy-MM-dd HH:mm:ss",
      // 部门列表
      departmentList: [],
      // 部门数据
      receivingDepartment: "",
      // 工单小类列表
      workOrderTypeList: [],
      // 工单小类数据
      caseSubType: [],
      // 员工下拉
      postslists: [],
      // 航班状态
      flightStatusList: [
        {
          type: "delay",
          value: "航班延误",
        },
        {
          type: "cancel",
          value: "航班取消",
        },
      ],

      // 紧急成都
      prilist: [
        {
          type: "0",
          value: "普通",
        },
        {
          type: "1",
          value: "紧急",
        },
      ],
      // 紧急成都数据
      pri: "",
      // 订单类型
      businessList: [
        {
          value: "flight",
          label: "国内机票",
        },
        {
          value: "train",
          label: "火车票",
        },
        {
          value: "hotel",
          label: "酒店",
        },
        {
          value: "service",
          label: "贵宾厅",
        },
        {
          value: "VIPAisle",
          label: "vip通道",
        },
        {
          value: "checkIn",
          label: "值机",
        },
        {
          value: "customer",
          label: "会员",
        },
      ],

      // 工单类型
      gongdanTypeList: [
        {
          lable: "claim",
          value: "理赔",
        },
      ],
      //工单类型数据
      caseType: "",

      // 卡类型下拉菜单
      cardTypeList: [
        {
          value: "silver",
          label: "白银会员",
        },
        {
          value: "gold",
          label: "黄金会员",
        },
        {
          value: "healthy",
          label: "黑金会员·健康卡",
        },
        {
          value: "travel",
          label: "黑金会员·出行卡",
        },
      ],
     headers: {
         type: 'workOrder'
      },
      PositionDownList: [], //职位
      receivePost: "", //职位数据
      receiver: "", //接收人员
      cardType: "", //卡类型
      cardNum: "", //会员卡号
      customerName: "", //会员姓名
      customerPhone: "", //会员手机号
      caseSubject: "", //工单标题
      claimsSettled: "", //已理赔次数
      orderType: "", //订单类型
      orderId: "", //订单号
      specifiedTime: "", //制定完成时间
      finish: "", //期望完成时间
      reply: "", //期望回复时间
      // 工单内容
      workOrderContentVo: {
        delayTime: "", //延误时长
        delayDate: "", //延误日期
        originalSetOffTime: "", //原定航班日期
        flightNumber: "", //航班号
        departureAirport: "", //出发机场
        arriveAirport: "", //到达机场
        journeySetOff: "", //行程（出发）
        journeyArrive: "", //行程（到达）
        flightStatus: "", //航班状态
        originalDepartureTime: "", //原定起飞时间
        actualDepartureTime: "", //实际起飞时间
        originalLandingTime: "", //原定落地时间
        actualLandingTime: "", //实际降落时间
        replenish: "", //延误补充
        documentVoList: [
          {
            type: "workOrder",
            url: "",
          },
        ],
      },
    };
  },
  watch: {
    receivingDepartment(nV, oV) {
      this.deplt = nV;
      console.log(this.deplt);
      this.receivePost = "";
      this.getAll();
    },
  },
  methods: {
 // 跳转修改页面
    editworkor(row) {   
      this.$router.push({
        name: "caseClaimModify",
        params: { row: row },
      });
    },


     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        // this.imageUrl = URL.createObjectURL(file.raw);
        this.dialogVisible = true;
      },
     // 查询工单
    getbackGuaranteeCaseById() {
      this.$axios
        .getbackGuaranteeCaseById({
          caseId: this.Thequery.caseId,
          caseStatus: this.Thequery.caseStatus,
          afterTime: this.CX.date1 ? this.CX.date1 : "",
          agoTime: this.CX.date2 ? this.CX.date2 : "",
          orderId: this.Thequery.orderId,
          orderType: this.Thequery.orderType,
          customerId: this.Thequery.customerId,
          phone: this.Thequery.phone,
          type: "claim",
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            // 工单列表数据
            this.Therepairorder = res.data;
            this.pageTotal = res.total;
          }
        });
    },

    // 理赔接口
    getbackGuaranteeCase() {
      if (
        this.cardNum != "" ||
        this.customerName != "" ||
        this.customerPhone != "" ||
        (this.workOrderContentVo.delayTime != "" &&
          this.workOrderContentVo.flightNumber != "" &&
          this.workOrderContentVo.originalSetOffTime != "" &&
          this.workOrderContentVo.departureAirport != "" &&
          this.orderId != "")
      ) {
        let claimVo = {
          template: "",
          finish: this.finish, //期望完成时间
          reply: this.reply, //期望回复时间
          workOrderContentVo: this.workOrderContentVo,
        };

        this.$axios
          .getbackGuaranteeCase({
            cardType: this.cardType, //卡类型
            cardNum: this.cardNum, //会员卡号
            customerName: this.customerName, //会员姓名
            customerPhone: this.customerPhone, //会员手机号
            caseSubType: this.caseSubType, //工单小类
            caseSubject: this.caseSubject, //标题
            claimsSettled: this.claimsSettled, //已赔偿次数
            receivingDepartment: this.receivingDepartment, //部门
            receivePost: this.receivePost, //职位
            receiver: this.receiver, //人员
            pri: this.pri, //紧急成都
            orderType: this.orderType, //订单类型
            orderId: this.orderId, //订单号
            specifiedTime: this.specifiedTime, //制定完成时间
            type: "Crm",
            workOrderType: "claim", //类型

            claimVo: claimVo,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.centerDialogVisible = false;
            }
          });
      } else {
        this.$message.error("请输入正确的工单信息");
      }
    },
    // 查会员信息
    getcustomerId() {
      if (
        this.customerName != "" &&
        this.cardNum != "" &&
        this.customerPhone != ""
      ) {
        this.$axios
          .getcustomerId({
            customerName: this.customerName,
            customerCard: this.cardNum,
            customerPhone: this.customerPhone,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.customerName = res.data.customerName;
              this.cardNum = res.data.customerCard;
              this.customerPhone = res.data.customerPhone;
              this.cardType = res.data.customerCardType;
            } else {
              this.$message({
                showClose: true,
                message: "查询错误",
                type: "error",
              });
            }
          });
      } else {
        this.$message({
          showClose: true,
          message: "会员姓名，手机号，卡号任选其一必填",
          type: "error",
        });
      }
    },

    // 接收部门
    geteedepartmentlist() {
      this.$axios.geteedepartmentlist({}).then((res) => {
        console.log(res);
        if (res.code == "200") {
          let list = JSON.parse(JSON.stringify(res.data));
          this.departmentList = list.map((item) => {
            return { label: item.deptName, value: item.deptId };
          });
          console.log(this.departmentList);
        }
      });
    },
    // 工单小类
    getselectworkOrderType() {
      // debugger
      this.$axios.getselectworkOrderType({}).then((res) => {
        console.log(res);
        if (res.code == "200") {
          let list = JSON.parse(JSON.stringify(res.data));
          let list1 = [];
          list1 = list.filter((item) => {
            return item;
          });
          console.log(list1);
          this.workOrderTypeList = list1.map((item) => {
            if (item == null) {
            } else {
              return { label: item.workOrderType, value: item.caseSubTypeId };
            }
          });
          console.log(this.workOrderTypeList);
        }
      });
    },
    // 职位下拉列表
    getAll() {
      this.$axios
        .getAll({
          deptId: this.deplt,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            this.PositionDownList = list.map((item) => {
              return { label: item.positionName, value: item.positionId };
            });
          }
        });
    },

    // 员工下拉
    postslist() {
      this.$axios
        .postslist({
          // deptId:this.gongdanList.label
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            let list = JSON.parse(JSON.stringify(res.data));
            this.postslists = list.map((item) => {
              return { label: item.employeeName, value: item.employeeId };
            });
            console.log(this.postslists);
          }
        });
    },
    // getupload(file){ axios
    //   .post(
    //     "http://172.16.7.51:8080/file/fileMapping/upload",
    //     {
    //       file: file,
    //     },
    //     {
    //       headers: {
    //         source: "crm",
    //       },
    //     }
    //   )
    //   .then((res) => {})},

    //上传头像
    getuploadAvatar(file) {
      // debugger;
      console.log(file);
      this.$axios

        .getuploadAvatar({
          file: file,
        })
        .then((res) => {
          console.log(res.data);
          if (res.code == "200") {
          }
        });
    },

  },
  mounted() {
    // 部门
    this.geteedepartmentlist();
    // 工单小类
    this.getselectworkOrderType();
    this.getAll();
    this.postslist();
  },
};
</script>

<style scoped>
.body {
  margin: 10px;
  border: 0.5px solid #4490ae;
  width: 1100px;
  font-weight: 400;
  font-size: 13px;
}
.colorCss {
  background-color: #e8f3f7;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border-right: 0.5px solid #4490ae;
}
.nocolorCss {
  width: 150px;
  height: 30px;
  line-height: 30px;
  border-right: 0.5px solid #4490ae;
}
.rowcss {
  border-bottom: 0.5px solid #4490ae;
}
.rowheight {
  /* height: 400px; */
  width: 80px;
  line-height: 350px;
  border-right: 0.5px solid #4490ae;
  background-color: #e8f3f7;
}

/* 上传照片 */
.upload-img-div {
  width: 50px;
  height: 50px;
  position: relative;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  text-align: center;
}

.addFeedbackUpload-img {
  overflow: hidden;
  width: 50px;
  height: 50px;
}

.addFeedbackUpload-img:hover {
  border-color: #c80505;
  color: #c80505;
}

.addFeedbackUpload-img .avatar-uploader-icon {
  text-align: center;
  z-index: 100;
  font-size: 50px;
  color: #8c939d;
  width: 130px;
  line-height: 80px;
  height: 100px;
}

.addFeedbackUpload-img:hover .avatar-uploader-icon {
  color: #c80505;
}

.addFeedbackUpload-img .upload__tip {
  font-size: 12px;
  text-align: center;
  z-index: 10;
}

/*上传照片的删除*/
.delUploadImg {
  border-radius: 50%;
  position: absolute;
  top: -10px;
  font-size: 20px;
  right: -10px;
  z-index: 999;
  color: #8c939d;
}

.delUploadImg:hover {
  color: #c80505;
}

.tou {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}
.header-1-1 {
  font-weight: bolder;
  display: flex;
  margin-left: 20px;
  padding-top: 20px;
}
.header-1-1-1 {
  font-weight: bolder;
  display: flex;
  margin-left: 20px;
  /* padding-top: 20px; */
}
.invoice {
  width: 97%;
  margin: auto;
  display: flex;
  height: 44px;
  margin-bottom: 20px;
  min-width: 1200px;
}
.invoice-1 {
  margin-right: 20px;
}
.invoice-2 {
  margin-left: 20px;
}
.tuo-1 {
  display: flex;
}
.tuo-2 {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}
.tuo {
  font-weight: bolder;
  display: flex;
  margin-left: 20px;
  padding-top: 20px;
  justify-content: space-between;
  margin-right: 20px;
}
</style>>
